<template>
  <div class="c-right">
    <div class="header">{{ nav.mCollect }}({{ collectList.length }})</div>

    <div class="collect-main">
      <div v-for="(item, index) in collectList" :key="index" class="collect-box">
        <img class="c-icon" src="/image/common/close.png" alt="" @click="delCollect(item.spuId)" />
        <img class="c-imgs" :src="item.picUrl" alt="" />
        <div>
          <div class="c-name">{{ item.spuName }}</div>
          <div class="c-info">{{ nav.Prices }}:CN${{ item.price }}/m</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { language } from "~/conf";
import { loginStore } from "@/components/store";

const loginStores = loginStore();
const { nav, mess } = language;
const emit = defineEmits(["delCollect"]);
type Tcollect = {
  picUrl: string;
  price: number;
  spuId: number;
  spuName: string;
  id: number;
};
defineProps<{
  collectList: Tcollect[];
}>();
const delCollect = async (id: number) => {
  emit("delCollect", id);
};
</script>

<style lang="stylus" scoped>
.c-right{
  width: 248px;
  height:596px;
  background: #FBFDFF;
  border-radius 9px
  box-shadow: 0px 1px 6px 2px rgba(102,102,102,0.24);
  .header{
    padding 10px 12px
    border-bottom: 1px solid #e1e1e1;
  }
}
.collect-main{
  height 545px;
  overflow-y auto;
  overflow-x hidden
  padding-left 5px;
  box-sizing:border-box
}
.collect-box{
  position relative
  display flex;
  justify-content flex-start;
  align-items center;
  width: 233px;
  height: 71px;
  background: #fff;
  border-radius: 8px;
  padding 5px 7px;
  box-sizing border-box;
  margin-top 10px
  transition all .3s
  cursor pointer
  .c-icon{
    position absolute
    right 5px
    top 5px
    width 18px
  }
  .c-imgs{
    width 60px
    border-radius: 8px;
    margin-right:8px
  }
  .c-name{
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-bottom 7px
  }
  .c-info{
    font-weight: 400;
    font-size: 12px;
    color: #666666;
  }
}
.collect-box:hover{
  background: #F8F8F8;
}
</style>
